<template>
  <div class="prize">
    <van-tabs v-model="active" color="#FDC12C" :line-height="height" :line-width="width"
              @change="tabChange(active)" title-active-color="#FDC12C" swipeable :lazy-render="false">
      <van-tab :title="item" v-for="(item,index) in tabs" :key="index">
        <div class="container">
          <dw-prize-content :form="form" :status="active" v-if="form.length !==0"></dw-prize-content>
          <div class="noData" v-if="form.length ===0">
            <div class="top"></div>
            <img src="@/assets/images/noData.png" alt="">
            <span>暂无数据</span>
          </div>
        </div>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/17 16:21.
   */
  import {Indicator} from 'mint-ui';
  import utils from '@/lib/StringExtend';
  import dwPrizeContent from './prizeContent'

  export default {
    mounted() {
      this.loadData();
    },
    components: {
      dwPrizeContent
    },
    props: {},
    data() {
      return {
        active: 0,
        height: 2,
        width: 160,
        wechatId: utils.getCookie('wechat_id'),
        form: [],
        tabs: ['待发货', '已发货']
      }
    },
    computed: {},
    methods: {
      loadData() {
        let params = {
          status: (this.active + 1),
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        Indicator.open('加载中...');
        this.$axios.userPrize(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.form = res.data;
        })
      },
      tabChange(e) {
        this.loadData();
      },
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .prize {
    width: 100%;
    height: 100%;
    background: white;

    .van-tabs__content, .van-tabs, .van-tabs--line {
      height: calc(100% - 44px - 0.12rem);
    }
    .noData {
      width: 2.5rem;
      color: #919191;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      .top{
        height: 2.3rem;
      }

      span {
        text-align: center;
        margin-top: 0.3rem;
      }

      img {
        width: 2.5rem;
        height: 1.7rem;
      }
    }
    .container {
      position: absolute;
      width: 100%;
      top: calc(44px + 0.12rem);
      left: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;


    }
  }
</style>
